<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <main class="p-4 bg-gray-50 min-h-screen">
      <div class="max-w-screen-xl mx-auto bg-white p-8 rounded-lg shadow-2xl">
        <h2 class="text-3xl my-6">评论</h2>
        <form action="" class="grid">
          <textarea
            name="comment"
            placeholder="请输入..."
            class="bg-gray-50 p-2 rounded"
          ></textarea>
          <fieldset class="py-4">
            <input
              type="submit"
              value="评论"
              class="px-4 py-1 bg-blue-600 rounded text-white"
            />
            <input
              type="reset"
              value="取消"
              class="px-4 py-1 bg-white rounded border ml-3"
            />
          </fieldset>
        </form>

        <div class="border-b border-gray-300 my-2 mb-4"></div>
        <div>
          <div class="flex">
            <img
              src="/images/timg.jpg"
              alt=""
              class="w-12 h-12 mr-4 rounded-full"
            />
            <div>
              <p>我是昵称</p>
              <p class="text-gray-600 text-sm">2小时前</p>
            </div>
            <span class="ml-auto">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 text-gray-500"
                viewBox="0 0 20 20"
                fill="currenColor"
              >
                <path
                  d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
                ></path>
              </svg>
            </span>
          </div>
          <p class="text-gray-600 py-4">
            由于 Tailwind 不会自动添加浏览器引擎前缀到生成的 CSS
            中，我们建议您安装 autoprefixer
            去处理这个问题，就像上面的代码片段所展示的那样。
          </p>
        </div>

        <div class="pl-8 border-l-2 border-gray-200">
          <div class="flex">
            <img
              src="/images/timg.jpg"
              alt=""
              class="w-12 h-12 mr-4 rounded-full"
            />
            <div>
              <p>我是昵称</p>
              <p class="text-gray-600 text-sm">2小时前</p>
            </div>
            <span class="ml-auto">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 text-gray-500"
                viewBox="0 0 20 20"
                fill="currenColor"
              >
                <path
                  d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
                ></path>
              </svg>
            </span>
          </div>
          <p class="text-gray-600 py-4">
            由于 Tailwind 不会自动添加浏览器引擎前缀到生成的 CSS
            中，我们建议您安装 autoprefixer
            去处理这个问题，就像上面的代码片段所展示的那样。
          </p>
        </div>

        <button class="pt-4 pb-10 text-blue-600">回复</button>
      </div>
    </main>
    <script type="module" src="/main.js"></script>
  </body>
</html>
